<template>
    <div>
        <div id="leftTree_rightTable">
            <div class="tab tab_on">
                <span class="tab_left tab_on_left">课程列表</span>
                <button class="tab_right tab_on_right"@click="rouBack"><i class="big el-icon-arrow-left"></i>返回</button>
                <button class="tab_right tab_on_right" @click="Refresh"><i class="big el-icon-refresh-left"></i>刷新</button>
            </div>

            <div class="content">
                <div  id="Tree">
                    <el-tree :data="data"
                             :props="defaultProps"
                             node-key="id"
                             :default-expanded-keys="[2,3,4,5,6,8]"
                             @node-click="getdata" id="tree1">
                    </el-tree>
                </div>
                <div id="table1">
                    <div>
                        <el-button plain>全部课程</el-button>
                        <el-button type="primary" plain>已上架</el-button>
                        <el-button type="success" plain>未上架</el-button>
                        <el-button type="info" plain>未审核</el-button>
                        <el-button type="warning" plain>未通过</el-button>
                    </div>
                    <div class="tabl">
                        <span class="tab_left">筛选查询</span>
                        <button class="tab_right" @click="Advancedretrievalshow =!Advancedretrievalshow">高级检索</button>
                    </div>

<!--                    模糊查-->
                    <div class="tab_two">
                        <el-form :inline="true" :model="formInline" class="demo-form-inline" @keyup.enter.native="likeData">
                            <el-form-item label="输入搜索">
                                <el-select v-model="formInline.proname" placeholder="请选择课程名称" class="tab_form" @keyup.enter.native="likeData">
                                    <el-option label="请选择课程名称" value=""></el-option>
                                    <el-option label="java1.1第一课程" value="java1.1第一课程"></el-option>
                                    <el-option label="view1.1第一课程" value="view1.1第一课程"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="课程分类">
                                <el-select v-model="formInline.classification" placeholder="请选择课程分类" class="tab_form" @keyup.enter.native="likeData">
                                    <el-option label="请选择课程分类" value=""></el-option>
                                    <el-option label="java入门" value="java入门"></el-option>
                                    <el-option label="java高级" value="java高级"></el-option>
                                    <el-option label="view入门" value="view入门"></el-option>
                                    <el-option label="view高级" value="view高级"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="课程价格">
                                <el-select v-model="formInline.Price" placeholder="请选择课程价格" class="tab_form" @keyup.enter.native="likeData">
                                    <el-option label="请选择课程价格" value=""></el-option>
                                    <el-option label="￥100" value="100"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </div>
                    <el-table :data="tableData3.slice((currentPage-1)*pageSize,currentPage*pageSize)" border style="width: 1125px">
                        <el-table-column fixed prop="courseId" label="编号" width="100"></el-table-column>
    <!--                    表格中显示图片-->
                        <el-table-column label="课程图片" width="100">
                            <template slot-scope="scope">
                                <el-image class="table-td-thumb" :src="scope.row.url"></el-image>
                            </template>
                        </el-table-column>
                        <el-table-column prop="courseName" label="课程名称" width="130"></el-table-column>
                        <el-table-column prop="courseIntro" label="备注" width="100"></el-table-column>
                        <el-table-column prop="coursePrice" label="价格" width="70"></el-table-column>
                        <el-table-column prop="courseStatus" label="状态" width="100">
                            <template  slot-scope="scope">
                                <el-switch v-model="scope.row.courseStatus" active-color="#13ce66" inactive-color="#ff4949"  :active-value="2" :inactive-value="3"></el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column prop="id" label="排序" width="100"></el-table-column>
                        <el-table-column prop="courseInfo" label="分类" width="100"></el-table-column>
                        <el-table-column prop="saleNum" label="数量" width="100"></el-table-column>
                        <el-table-column prop="courseCstatus" label="审核状态" width="100" :formatter="shzt">
                            <template slot-scope="scope" >
<!--                                <div v-text="scope.row.courseCstatus" ></div>-->
                                {{scope.row.courseCstatus | shzt}}<br>
                                <el-button @click="resultShow(scope.row,scope.row.courseId)" type="text" size="small">审核详情</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="100">
                            <template slot-scope="scope">
                                <div class="operation">
                                    <el-button @click="handleClick(scope.row)" type="text" size="small" class="result_class">查看</el-button>
                                    <el-button @click="edit(scope.row,scope.row.id)" type="text" size="small" class="result_class">编辑</el-button>
                                </div>
                                <div class="operation">
                                    <router-link :to="{name:'courselog',params:{courselogid:scope.row.courseId}}" class="result_class">日志</router-link>
                                    <el-button @click="deleteClick(scope.row)" type="text" size="small" class="result_class">   删除</el-button>
                                </div>

                            </template>
                        </el-table-column>
                    </el-table>
    <!--                分页-->
                    <div class="block">
                        <el-pagination align='center' @size-change="handleSizeChange"
                                       @current-change="handleCurrentChange"
                                       :current-page="currentPage" :page-sizes="[5,10,20]"
                                       :page-size="pageSize"
                                       layout="total, sizes, prev, pager, next, jumper"
                                       :total="tableData3.length" width="500">
                        </el-pagination>
                    </div>
<!--                    弹出层-->
<!--                    查看-->
                    <comp :dialogVisible="dialogVisible" :dialogInfo="dialogInfo" @update:dialogVisible="dialogVisibles"></comp>
                    <!--        审核详情页面-->
                    <el-dialog title="审核详情" :visible.sync="show" :before-close="showClose">
                        <div >
                            <el-table  border :data="tableData5" style="width: 100%">
                                <!-- 对应字段写好-->
                                <el-table-column align="center" prop="implementDater" sortable label="审核时间" >
                                </el-table-column>
                                <el-table-column align="center" prop="implementId" label="审核人员" >
                                </el-table-column>
                                <el-table-column align="center" prop="result" label="审核结果" >
                                </el-table-column>
                                <el-table-column align="center" prop="remarks" label="反馈详情" >
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-dialog>
<!--                    编辑-->
                    <el-dialog title="编辑课程信息" :visible.sync="dialogVisibl" :before-close="handleClose">
                        <div>
                            <el-form ref="form" :model="editObj" label-width="80px">
                                <el-input type="hidden" v-model="editObj.courseId"></el-input>
                                <el-form-item label="课程名称">
                                    <el-input v-model="editObj.courseName"></el-input>
                                </el-form-item>
                                <el-form-item label="备注">
                                    <el-input v-model="editObj.courseIntro"></el-input>
                                </el-form-item>
                                <el-form-item label="分类">
                                    <el-input v-model="editObj.courseInfo"></el-input>
                                </el-form-item>
                                <el-form-item label="数量">
                                    <el-input v-model="editObj.saleNum"></el-input>
                                </el-form-item>
                            </el-form>
                        </div>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="confirm">确 定</el-button>
			            </span>
                    </el-dialog>
                </div>
            </div>
        </div>
        <!--                        高级检索-->
        <transition name="el-fade-in-linear">
            <div class="upDate_View_details" v-if="Advancedretrievalshow">
                <div class="View_details_top"><span>高级检索</span><span class="back" @click="Advancedretrievalshow = false">×</span></div>
                <el-form
                        :inline="true"
                        :model="this.formInline"
                        class="demo-form-inline"
                        label-width="80px"
                        @keyup.enter.native="likeData"
                        @submit.native.prevent
                >
                    <el-form-item class="Advanced_retrieval" label="输入搜索:">
                        <el-input @keyup.enter.native="likeData"  class="tab_two_like" v-model="formInline.proname" placeholder="课程名称"></el-input>
                    </el-form-item>
                    <el-form-item class="Advanced_retrieval" label="课程分类:">
                        <el-select @keyup.enter.native="likeData"  class="tab_two_like" v-model="formInline.classification" placeholder="请选择课程分类">
                            <el-option label="暂不选择" value=""></el-option>
                            <el-option label="java初级" value="java初级"></el-option>
                            <el-option label="java高级" value="java高级"></el-option>
                            <el-option label="view初级" value="view初级"></el-option>
                            <el-option label="view高级" value="view高级"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item class="Advanced_retrieval" label="课程状态:">
                        <el-select @keyup.enter.native="likeData"  class="tab_two_like" v-model="formInline.label" placeholder="上架/下架">
                            <el-option label="暂不选择" value=""></el-option>
                            <el-option label="上架" value="2"></el-option>
                            <el-option label="下架" value="3"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item class="Advanced_retrieval" label="课程价格:">
                        <el-input @keyup.enter.native="likeData"  class="tab_two_like" v-model="formInline.Price" placeholder="请输入价格"></el-input>
                    </el-form-item>
                    <el-form-item class="Advanced_retrieval" label="审核状态:">
                        <el-select @keyup.enter.native="likeData"  class="tab_two_like" v-model="formInline.Auditstatus" placeholder="审核状态">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="已审核" value="1"></el-option>
                            <el-option label="未审核" value="3"></el-option>
                            <el-option label="审核中" value="4"></el-option>
                            <el-option label="审核失败" value="5"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div class="View_details_bottom">
                    <div class="View_details_bottom_position">
                        <button @click="Advanced_retrieval_no" class="View_details_bottom_no">取消</button>
                        <button @click="likeData" class="View_details_bottom_yes">确定</button>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
    import comp from './coursesee'
export default {
    inject:['reload'],
    components:{
        comp,
    },
    data() {
        return {
            //高级检索和模糊查弹出层
            Advancedretrievalshow:false,
            formInline: {
                proname: '',
                classification: '',
                label:'',
                Price:'',
                Auditstatus:''
            },
            //审核详情弹出层
            show:false,
            tableData4:[],
            tableData5:[],
            //分页
            data: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            tableData:[],
            tableData2:[],
            tableData3:[],
            //表格渲染

            currentPage: 1, // 当前页码
            total:0,// 总条数
            pageSize: 5 ,// 每页的数据条数
            //查看的弹出层
            dialogVisible: false,
            dialogInfo:{},
            //编辑的弹出层
            dialogVisibl:false,
            editObj: {
                courseId:'',
                courseName: '',
                courseIntro: '',
                courseInfo: '',
                saleNum: ''
            },
        };
    },
    methods: {

        //审核表格弹出层数据
        resultData(){
            this.$http.get("/classify/auditList",{
            }).then(res => {
                this.tableData4 = res.data;
            });
        },
        resultShow(row,id){
            this.tableData5=[];
            for (let i = 0; i<this.tableData4.length;i++){
                if(this.tableData4[i].courseId == id){
                    this.tableData5.push(this.tableData4[i])
                }
            }
            this.show = !this.show
        },
        showClose(){
            this.show=false;
        },
        // 高级检索点击取消事件
        Advanced_retrieval_no(){
            this.formInline.proname = '',
            this.formInline.classification = '',
            this.formInline.label = '',
            this.formInline.Auditstatus = '',
            this.formInline.Price = '',
            this.Advancedretrievalshow = false;
        },
        //高级检索点击确定与模糊查事件
        likeData(){
            let url = "/classify/retrieval";
            var data = new URLSearchParams();
            data.append("courseName",this.formInline.proname);
            data.append("courseStatus",this.formInline.label);
            data.append("courseInfo",this.formInline.classification);
            data.append("courseCstatus",this.formInline.Auditstatus);
            data.append('coursePrice',this.formInline.Price);
            console.log(this.formInline.classification)
            this.$http.post(url,data,{
                heanders:{
                    'C':'application/x-www-form-urlencoded'
                }
            }).then(res =>{
                console.log(res)
                this.tableData3 = res.data;
            })
            this.Advancedretrievalshow = false;
            //this.reload();
        },
        //点击编辑
        edit(item, id) {
            this.userIndex = id;
            console.log(id)
            // console.log(item.id)
            this.editObj = {
                courseId:item.courseId,
                courseName: item.courseName,
                courseIntro: item.courseIntro,
                courseInfo: item.courseInfo,
                saleNum: item.saleNum,
            };

            this.dialogVisibl = true;
        },
        //编辑中点击×号
        handleClose() {
            this.dialogVisibl = false;
        },
        //编辑点击确定按钮
        confirm(){
            let url = "/classify/update";
            var data = new URLSearchParams();
            data.append("courseName",this.editObj.courseName);
            data.append("courseIntro",this.editObj.courseIntro);
            data.append("courseInfo",this.editObj.courseInfo);
            data.append("saleNum",this.editObj.saleNum);
            data.append('courseId',this.editObj.courseId);
            this.$http.post(url,data,{
                heanders:{
                    'C':'application/x-www-form-urlencoded'
                }
            }).then(res =>{
                console.log(res)

            })
            this.dialogVisibl = false;
            this.reload();
        },
        //点击查看 按钮  的事件
        handleClick(info) {
            console.log(info);
            this.dialogVisible = true;
            this.dialogInfo = info
        },
        //子组件传 过来的 数据
        dialogVisibles(v){
            this.dialogVisible = v
            console.log(v)
        },
        //删除按钮事件
        deleteClick(row){
            let url="/classify/delete";
            var data = new URLSearchParams();
            data.append('id',row.courseId);
            this.$http.post(url,data,{
                heanders:{
                    'C':'application/x-www-form-urlencoded'
                }
            }).then(res =>{
                console.log(res)
            })
            this.dialogVisible = false;
        },
        //表中格式化
        shzt(row){
            if (row== 1) {
                return "已审核";
            } else if(row == 3){
                return "未审核";
            }else if(row == 4){
                return "审核中";
            }else if(row == 5){
                return "审核失败";
            }else if(row == 6){
                return "其他";
            }
        },
        //点击树，表显示的内容
        getdata(data){
            this.tableData3=this.tableData;
            this.tableData2=[];
            for(let i=0;i<this.tableData3.length;i++){
                if(this.tableData3[i].classId===data.id){
                    this.tableData2.push(this.tableData3[i])
                }
            }
            this.tableData3=this.tableData2;
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.currentPage = 1;
            this.pageSize = val;
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
        },
        //刷新按钮
        Refresh(){
            this.reload();
        },
        //返回按钮
        rouBack () {
            this.$router.back()
        }
    },
    filters:{
        shzt(row){
            if (row== 1) {
                return "已审核";
            } else if(row == 3){
                return "未审核";
            }else if(row == 4){
                return "审核中";
            }else if(row == 5){
                return "审核失败";
            }else if(row == 6){
                return "其他";
            }
        },
    },
    created() {
        //请求tree的数据
        this.$http.get("/classify/treegetall").then(res => {
            this.data = res.data
        })
        //请求表的数据
        this.$http.get("/classify/tablegetall").then(res => {
            this.tableData = res.data
            this.tableData3=res.data
        })
        //请求审核表中数据
        // this.$http.get("/classify/getall").then(res => {
        //     this.tableData = res.data
        //     this.tableData3=res.data
        // })
        this.resultData();
    }

}
</script>

<style scoped>
#leftTree_rightTable{
    margin: 0px;
    width: 100%;
}
#tree1{
    height:634px;
}
.tab{
    height: 42px;
    background-color: #F3F3F3;
    border: 1px #E4E4E4 solid;
    line-height: 2.5;
}
.tab_on{
    margin: -20px 0px 12px -20px;
    padding: 0px 10px 4px 0px;
    width: 102%;
}
.View_details_top{
    background-color: #F2F2F2;
    width: 700px;
    height: 50px;
}
.View_details_top>span{
    line-height: 50px;
    padding: 0px 0px 0px 25px;
    color: #666666;
    font-weight: 600;
}
    .tab_left{
        margin: 0px 0px 0px 9px;
        font-size: 13px;
    }
    .tab_on_left{
        color: #A2A2A2;
        font-size: 15px;
    }
    .tab_right{
        margin: 10px 15px 0px 0px;
        padding: 4px 13px;
        float: right;
        font-size: 12px;
        background: white;
        border: 2px #D8D8D8 solid;
    }
    .tab_on_right{
        padding: 4px 17px;
        font-size: 12px;
        color: #9A9A9A;
    }
    .content{
        margin-top: 14px;
    }
    #Tree{
        float: left;
        width: 217px
    }
    .big{
        font-size: 13px;
        padding: 0px 5px 0px 0px;
        font-weight: 900;
    }
    .tab_two{
        height: 52px;
        background-color: #F3F3F3;
        border: 1px #E4E4E4 solid;
        line-height: 52px;
        padding-left: 10px;
        width: 1113px;
    }
    .tab_form{
        margin-top: 6px ;
    }
.tabl{
    height: 42px;
    background-color: #F3F3F3;
    border: 1px #E4E4E4 solid;
    line-height: 2.5;
    width: 1123px;
}
.block{
    width: 1123px;
}
#table1{
    margin: 0px 0px 0px 280px;
}
.Advanced_retrieval{
    margin: 40px 0px 43px 66px;
}
.operation{
    margin: 1px 0px 4px 0px;
}
.result_class{
    cursor:pointer;
    color: #2FA0FD;
    margin: 0px 4px 0px 4px;
    font-size: 10px;
}
</style>
